<template>
	<view class="notice">
		<u-navbar :border-bottom="false" title="待办事宜"></u-navbar>
		<view class="list" v-if="tongzhiList.length != 0">
			<view class="item acea-row row-middle row-column" v-for="(item,index) in tongzhiList" :key="index">
				<!-- <view class="time">17:28:55</view> -->
				<view class="container item acea-row row-column" @click="common.go('/pages/pack/index/noticeDetail?id='+tongzhiList[index].id)">
					<text class="title">请假通知</text>
					<view class="info acea-row row-middle row-column">
						<text class="name">{{item.title}}</text>
						<view class="container-list acea-row row-column">
							<view class="container-item acea-row">
								<text>请假时间</text>
								<view class="time acea-row row-middle row-column">
									<text>{{item.start_date}}</text>
									<text>|</text>
									<text>{{item.end_date}}</text>
								</view>
							</view>
							<view class="container-item acea-row row-middle">
								<text>申请时间</text>
								<text>{{item.dateline}}</text>
							</view>
							<view class="container-item acea-row row-middle">
								<text>请假原因</text>
								<text>{{item.content?item.content:'无'}}</text>
							</view>
							<view class="container-item acea-row row-middle">
								<text>处理状态</text>
								<text :style="'color:'+(item.status == 1?'#1661FF':'#FF4D4F')+';'">{{item.status | changeStatus}}</text>
							</view>
						</view>
					</view>
					<view class="footer acea-row row-middle row-between">
						<text>查看详情</text>
						<u-icon name="arrow-right" color="#8f959e" size="32"></u-icon>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" style="margin-top: 32rpx;display: block;" />
		</view>
		<u-empty text="暂无待办" mode="list" v-else margin-top="32"></u-empty>
		<!-- <u-loadmore :status="status" /> -->
		<view class="commonFooter2"></view>
	</view>
</template>

<script>
	import common from '../../api/common.js'
	import request from '../../api/request.js'
	export default{
		data(){
			return{
				common,
				status: 'loadmore',
				page: 1,
				limit:10,
				tongzhiList:[],
				page:1
			}
		},
		onShow() {
			this.page = 1
			this.tongzhiList = []
			this.getTongzhi()
		},
		methods:{
			getTongzhi(){
				let data = {
					page:this.page,
					status:1,
					limit:this.limit,
				}
				this.status = 'loading'
				request.go((e)=>{
					this.status = 'loadmore';
					if(e.data.length == 0){
						this.status = 'nomore'
					}else{
						this.tongzhiList = this.tongzhiList.concat(e.data)
					}
				},`/tongzhi`,data,'POST')
			},
			
		},
		filters:{
			changeStatus(e){
				switch(e){
					case "1":
						return '待处理'
					break;
					case "2":
						return '同意'
					break;
					case "3":
						return '拒绝'
					break;
				}
			}
		},
		onReachBottom() {
			if(this.status == "loadmore"){
				this.page = ++ this.page;
				this.getTongzhi()
			}
		}
	}
</script>

<style scoped>
	.notice{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.notice .list{
		min-height: 100vh;
	}
	.notice .item{
		padding: 36rpx 32rpx 0 32rpx;
		box-sizing: border-box;
	}
	.notice .item .time{
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
		margin-bottom: 36rpx;
	}
	.notice .item .container{
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx 32rpx 0 32rpx;
		background: #ffffff;
		border-radius: 24rpx;
	}
	.notice .item .container .title{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1f2329;
		line-height: 40rpx;
	}
	.notice .item .container .info{
		margin-top: 32rpx;
	}
	.notice .item .container .info .name{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 600;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 32rpx;
	}
	.notice .item .container .info .container-list{
		width: 100%;
	}
	.notice .item .container .info .container-item{
		margin-bottom: 16rpx;
	}
	.notice .item .container .info .container-item:last-of-type{
		margin-bottom: 0;
	}
	.notice .item .container .info .container-item .time text{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329 !important;
		line-height: 40rpx;
		margin-left: 20rpx;
	}
	.notice .item .container .info .container-item text{
		display: block;
	}
	.notice .item .container .info .container-item text:nth-child(1){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 40rpx;
	}
	.notice .item .container .info .container-item text:nth-child(2){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		margin-left: 20rpx;
	}
	.notice .item .container .footer{
		height: 86rpx;
		border-top: 2rpx solid #ebedf0;
		margin-top: 32rpx;
	}
	.notice .item .container .footer text{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	/* .notice .item .container text:nth-child(1){
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 16rpx;
	}
	.notice .item .container text:nth-child(2){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 40rpx;
	} */
</style>
